<div class="header_in">
    <div class="list li-hide">
        <img src="/resources/sap/img/list.png" alt=""/>

        <div class="list-hide clearfix li-hide">
            <div class="list-top-bd">
            </div>
            <div class="list-content">
               [#list pcRoots as pc]
                    <div class="keepsake">
                        <dl>
                            <dt><a href="/p/l.htm?pc=${pc.id}">${pc.name}</a></dt>
                            <dd>
                            [@product_category_children_list productCategoryId = pc.id]
                                [#list productCategories as productCategory]
                                    <a href="/p/l.htm?pc=${productCategory.id}">${productCategory.name}</a>
                                [/#list]
                            [/@product_category_children_list]
                            </dd>
                        </dl>
                    </div>
               [/#list]
                <div class="keepsake">
                    <dl>
                        <dt>个性化</dt>
                        <dd><a href="#">定制：</a><a href="#">徽章</a><a href="#">笔记本</a><a href="#">手机壳</a></dd>
                        <dd><a href="#">徽章</a><a href="#">笔记本</a><a href="#">手机壳</a></dd>
                    </dl>
                </div>
                <div class="keepsake">
                    <dl>
                        <dt>服务</dt>
                        <dd><a href="/slow/index.htm">慢递，寄给未来的某某</a></dd>
                        <dd><a href="/fast/index.htm">快递，寄给现在的某某</a></dd>
                        <dd><a href="/future/index.htm">万物银行，寄存万物</a></dd>
                        <dd><a href="#">记忆回收，封存记忆</a></dd>
                    </dl>
                </div>
                <div class="list-top-bd">
                </div>
            </div>
        </div>
    </div>
    <div class="title">
        <a href="/index.htm"><img src="/resources/sap/img/title1_03.png" alt=""/></a>
    </div>

<div class="people peo_click"
[#if member??]
     onclick="location.href='/m/pf/index.htm';"
[/#if]
>
[#if member??]
    <img class="img_avator" src="/i/upload/image/avator/${member.avator}" />
[#else]
    <img src="/resources/sap/img/people_03.png" alt="" class="peo_click"/>
[/#if]
</div>

    <div class="shopcars">
        <a href="/cart/list.htm"><img src="/resources/sap/img/cars_03.png" alt=""/></a>
    </div>

    <div class="zhezhao registerPanel" id="registerPanle">
    </div>
    <div class="registerBox register-box">
        <div class="register-box-close">
            <a><i class="iconfont iconfont-color-black">&#xe61c;</i></a>
        </div>
        <div class="registerBox register-box-content">
            <ul class="registerBox">
                <li class="registerBox">
                    <label class="registerBox register-box-text">注册</label>
                </li>
                <li class="registerBox">
                    <label class="registerBox" id="errorMessage"
                           style="font-size: 14px; color: red;display: none;"></label>
                </li>
                <li class="registerBox">
                    <input class="registerBox" id="phone" type="text" maxlength="11" placeholder="请输入手机号"/>
                </li>
                <li class="registerBox">
                    <div class="registerBox">
                        <input class="registerBox" id="captcha" style="width: 40%;" type="text" maxlength="6"
                               placeholder="验证码"/>
                        <button id="regCaptchaBtn" class="registerBox" style="width: 56%;" type="button">获取验证码</button>
                    </div>
                </li>
                <li class="registerBox">
                    <input class="registerBox" id="password" type="password" placeholder="请输入密码"/>
                </li>
                <li class="registerBox">
                    <div class="registerBox">
                        <input class="registerBox" style="width: 10%;" type="checkbox" id="accept"/>
                        <label class="registerBox">我已阅读<a class="registerBox" href="#" target="_blank">用户协议</a>和<a
                                class="registerBox" href="#" target="_blank">隐私条款</a></label>
                    </div>
                </li>
                <li class="registerBox">
                    <button class="registerBox" type="button" id="registerButton" disabled="disabled">立即注册</button>
                </li>
            </ul>
        </div>
    </div>

    <div class="login login_cli">
        <form id="loginForm" action="" method="post" class="login_cli">
            <p class="hh login_cli">
                <label for="username" class="login_cli">帐号：</label>
                <input class="login_cli" type="text" id="username" name="username" value="15622752760" required/>
            </p>

            <p class="hh clearfix login_cli">
                <label for="password" class="login_cli">密码：</label>
                <input class="login_cli" type="password" id="loginPassword" value="123123" name="loginPassword" required/>
            </p>

            <div class="login_cli">
                <label id="loginButton" class="denglu_btn" style="button">嗯</label>
                <a id="register" class="zhuce registerClick">快来注册</a>
            </div>

            <label for="check" class="jizhumima login_cli">
                <input type="checkbox" class="login_cli jizhu_cho" name="rememberme" id="rememberme"/>
                <label for="rememberme" class="login_cli jizhu_cho">记住密码</label>
            </label>
        </form>
    </div>
</div>
<script>
    //显示隐藏列表
    $('.li-hide').hover(function () {
        $('.list-hide').css({
            'display': 'block'
        });
    }, function () {
        $('.list-hide').css({
            'display': 'none'
        });
    })
    $(document).click(function (event) {
        if ($(event.target).is('.peo_click') || $(event.target).is('.login_cli')) {
            $('.login_cli').show();
        } else {
            $('.login_cli').hide();
        }

        if ($(event.target).is('.registerClick') || $(event.target).is('.registerBox')) {
            $('.registerPanel').show();
            $('.registerBox').show();
        } else {
            $('.registerPanel').hide();
            $('.registerBox').hide();
        }
    })


    $('#regCaptchaBtn').click(function () {
        var phone = document.getElementById("phone");
        var value = phone.value.trim();
        if (value && value.length == 11) {
            $.ajax({
                cache: false,
                type: "GET",
                url: "/phone/sendCode.htm",
                data: {phone: value},
                success: function (data) {
                    errorMessage(true, data.data);
                    if(data.code == 0){
                        // 1分钟内禁止点击
                        for (var i = 1; i <= 60; i++) {
                            // 1秒后显示
                            window.setTimeout("updateTime(" + (60 - i) + ")", i * 1000);
                        }
                    }
                }
            });

        } else {
            errorMessage(true, "请输入正确的手机号码");
            phone.focus();
        }

        return true;
    });

    function updateTime(i) {
        // setTimeout传多个参数到function有点麻烦，只能重新获取对象
        var obj = document.getElementById("regCaptchaBtn");
        if (i > 0) {
            obj.innerHTML = i + "秒后获取";
            obj.disabled = true;
        } else {
            obj.innerHTML = "获取验证码";
            obj.disabled = false;
        }
    }

    function errorMessage() {
        var $errorMessage = $('#errorMessage');
        var isShow = arguments[0] ? arguments[0] : false;
        var message = arguments[1] ? arguments[1] : "";
        if (isShow) {
            $errorMessage.html(message);
            $errorMessage.show();
        } else {
            $errorMessage.hide();
        }
    }

    $('#registerButton').click(function () {
        $.ajax({
            url: "${base}/com/public_key.action",
            type: "GET",
            dataType: "json",
            cache: false,
            success: function (data) {
                var rsaKey = new RSAKey();
                rsaKey.setPublic(b64tohex(data.modulus), b64tohex(data.exponent));
                var enPassword = hex2b64(rsaKey.encrypt($('#password').val()));
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "/m/reg/register.htm",
                    data: {phone: $('#phone').val(), captcha: $('#captcha').val(), password: enPassword},
                    success: function (data) {
                        errorMessage(true, data.data);
                        if (data.code == 0) {
                            window.location.href=window.location.href;
                        } else {
                            $.message(data.data);
                        }
                    }
                });
            }
        });
    });

    $('#accept').change(function () {
        if (document.getElementById("accept").checked) {
            $('#registerButton').attr("disabled", false);
        } else {
            $('#registerButton').attr("disabled", true);
        }
    });

    $('#loginButton').click(function () {
        $.ajax({
            url: "${base}/com/public_key.action",
            type: "GET",
            dataType: "json",
            cache: false,
            success: function (data) {
                var rsaKey = new RSAKey();
                rsaKey.setPublic(b64tohex(data.modulus), b64tohex(data.exponent));
                var enPassword = hex2b64(rsaKey.encrypt($('#loginPassword').val()));
                $.ajax({
                    url: "/m/l/submit.htm",
                    type: "POST",
                    data: {
                        username: $('#username').val(),
                        enPassword: enPassword
                    },
                    dataType: "json",
                    cache: false,
                    success: function (message) {
                        if ($("#rememberme").prop("checked")) {
                            addCookie("memberUsername", $('#username').val(), {expires: 7 * 24 * 60 * 60});
                        } else {
                            removeCookie("memberUsername");
                        }
                        if (message.type == "success") {
                            window.location.href=window.location.href;
                        } else {
                            $.message(message);
                        }
                    }
                });
            }
        });
    });
</script>